<template>
	<view class="index">
		<view class="top">
			<u-notice-bar mode="horizontal" type="error" bg-color="#fed940" :list="[noctietext]" style="padding: 0;"></u-notice-bar>
		</view>
		<view class="note card">
			<view class="ico">
				<view class="imgIco"><u-image shape="circle" width="100rpx" height="100rpx" src="@/static/ico/qinghua.jpg" mode="widthFix"></u-image></view>
				<view class="imgIco"><u-image shape="circle" width="120rpx" height="120rpx" src="@/static/ico/logo.png" mode="widthFix"></u-image></view>
				<view class="imgIco"><u-image shape="circle" width="100rpx" height="100rpx" src="@/static/ico/express.png" mode="aspectFill"></u-image></view>
			</view>
			<view class="orde">
				<view class="redTile" style="color: red;margin-left: 26rpx;">
					<text v-if="orde.message==null||orde.message==''">检测取件码:一单一件</text>
					<text v-else>检测取件码:{{orde.message | parNote}}</text>
					</view>
				<u-field v-model="orde.message" 
				type="textarea"
				height="40"
				clear-size="50"
				:border-bottom="false"
				icon="order"
				:trim="true"
				label-width='0'
				placeholder="请粘贴快递站发您的快递信息(例如:【菜鸟裹裹】您有1个包裹到湖理......)"
				placeholder-style="font-weight: bold;letter-spacing:40rpx"
				>
				</u-field>
			</view>
		</view>
		<view class="present card" @click="openShow('expressShow')">
			<view class="title">
				<text>快递选择</text>
			</view>
			<view class="site">
				<text class="a">当前选择快递：{{express?express:''}}</text>
				<u-icon name="car" size="50"></u-icon>
			</view>
		</view>
		<view class="present card" @click="openShow('siteShow')">
			<view class="title">
				<text>送达宿舍</text>
			</view>
			<view class="site">
				<text class="a" v-if="address">{{address.dormitory+''+ address.full_address +' '+ address.name+' '+  address.mobile}}</text>
				<text class="a" v-else>(空)栋(空)号宿舍 姓名 电话</text>
				<u-icon name="edit-pen" size="50"></u-icon>
			</view>
		</view>
		<view class="present card"  @click="openShow('speciShow')">
			<view class="title">
				<text>规格选择</text>
			</view>
			<view class="site">
				<text class="a">当前选择规格：{{speci?speci:''}}</text>
				<u-icon name="setting" size="50"></u-icon>
			</view>
		</view>
		<!--<view class="message card">
			<view class="title">
				<text>留言</text>
			</view>
			<view class="tag">
				<text :class="val.show?'active':'pu'" v-for="(val,index) in messageList" :key='index' @click="pushMessage(val,index)">
					{{val.text}}
				</text>
			</view>
			<view class="liuyan">
				<u-field
				v-model="remark"
				type="text"
				height="40"
				clear-size="50"
				:border-bottom="false"
				icon="chat"
				:trim="true"
				label-width='0'
				:auto-height='false'
				placeholder="其他留言信息"
				placeholder-style="font-weight: bold"
				/>
			</view>
		</view>-->
		<view class="tijiao">
			<text @click="submitOrde">提交</text>
		</view>
		<!--快递选择弹窗-->
		<u-select value-name="id" :default-value="[Number.parseInt(expressList.length/2)]" label-name="name" v-model="expressShow" mode="single-column" confirm-color="#fbe237" :list="expressList" @confirm="exChoice"></u-select>
		<!--规格选择弹窗-->
		<u-select v-model="speciShow" :default-value="[Number.parseInt(speciList.length/2)]" value-name="id" label-name="ex_desc"  mode="single-column" confirm-color="#fbe237" :list="speciList" @confirm="speciChoice"></u-select>
		<!--地址弹窗层-->
		<u-popup v-model="siteShow" mode="bottom" border-radius="20" height="700" :closeable='true' :mask-close-able="false">
			<view class="titleSite"><text>送件地址</text></view>
			<view class="siteInfo">
				<view class="name">
					<u-field
					v-model="writeRess.name"
					type="text"
					icon="account"
					label="姓名"
					:border-bottom="false"
					placeholder="请填写姓名"
					/>
					<view style="margin: 0 20rpx 10rpx 20rpx;padding-bottom: 10rpx;border-bottom:1px solid #f1f1f1;"><u-icon name="info-circle" color="#999" size="30"></u-icon><text style="color: #999;font-size: 28rpx;letter-spacing: 7rpx;margin-left: 6rpx;">请注意,是快递的收件人名称</text>
					</view>
					
				</view>
				<view>
					<u-field
						v-model="writeRess.mobile"
						icon="phone"
						:border-bottom="false"
						label="手机号"
						placeholder="请填手机号"
					><!--<u-button size="mini" slot="right" type="success" @click="getCode">获取手机号</u-button>-->
					</u-field>
					<view style="margin: 0 20rpx 10rpx 20rpx;padding-bottom: 10rpx;border-bottom:1px solid #f1f1f1;"><u-icon name="info-circle" color="#999" size="30"></u-icon><text style="color: #999;font-size: 28rpx;letter-spacing: 7rpx;margin-left: 6rpx;">请注意,是快递的收件人电话号</text>
					</view>
				</view>
				<view>
					<u-field 
						icon="map"
						@click="openShow('floorShow')" v-model="writeRess.dormitory" 
						:disabled="true" label="楼栋" placeholder="请选择楼栋"
						right-icon="arrow-down-fill"
						>
				</u-field>
					<u-select v-model="floorShow" value-name="id" label-name="room_no"  mode="single-column" confirm-color="#fbe237" :list="floorList" @confirm="clickItem"></u-select>
					<u-field
							v-model="writeRess.full_address"
							type="text"
							icon="home"
							label="宿舍号"
							:border-bottom="false"
							placeholder="请输入宿舍号 (如:233)"
						/>
					<view style="margin: 0 20rpx 10rpx 20rpx;padding-bottom: 10rpx;border-bottom:1px solid #f1f1f1;"><u-icon name="info-circle" color="#999" size="30"></u-icon><text style="color: #999;font-size: 28rpx;letter-spacing: 7rpx;margin-left: 6rpx;">请填写正确的地址</text>
					</view>
				</view>
				<view class="sub">
					<u-button @click="addressIndex" type="success" shape="circle" size="medium">确定</u-button>
				</view>
					<!--<view class="upImg">
						<text>上传校园卡(可选项)</text><u-upload :max-size="5 * 1024 * 1024" max-count="1"></u-upload>
					</view>-->
			</view>
		</u-popup>
		<view class="service" @click="service">
			客服
		</view>
		<u-modal v-model="serviceShow" title="添加客服微信">
			<view class="slot-content" style="display: flex;justify-content: center;">
				<u-image width="350rpx" height="350rpx" src="@/static/ico/kefu.jpg"></u-image>
			</view>
		</u-modal>
		<view><phone/></view>
		<view style="display: flex;justify-content: center;">
			<image style="margin-left: 10rpx;" src="../../static/ico/msg.jpg"></image>
		</view>
	</view>
</template>


<script>
	import {Login} from 'ulits/login.js'
	import {getExpressList,getSpeciList,getFloorList,getSite,address,getnoctie} from 'request/getData.js'
	import {payment} from 'ulits/payment.js'
	import {parseMa} from 'ulits/tool.js'
	import phone from "components/phone"
	export default {
		data() {
			return {
				//提交的信息
				orde:{
					message:"",//取件信息
					express_id:null,//快递ID
					address_id:null,//地址ID,
					spec_id:null,//规格ID
					remark:null//留言信息
				},
				expressShow:false,//快递弹窗开关
				express:null,//当前选择的快递
				expressList:[],
				
				speciShow:false,//规格弹窗开关
				speci:null,//当前规格选择
				speciList:[],//收费规格列表
				
				messageList:[
					{text:'晚上再送',show:false},
					{text:'我很着急',show:false},
					{text:'请敲门',show:false},
					{text:'易碎物品',show:false},
					{text:'冷藏物品请勿暴晒',show:false}
				],
				addMessage:[],//点击留言添加进去
				remark:'',//请输入留言
				
				siteShow:false,//地址的弹窗开关
				floorList:null,//楼栋列表
				floorShow:false,//选择列表开关
				address:null,//获取用户地址进行展示
				writeRess:{//写地址发给服务器
					dormitory_id:null//楼栋ID
				},
				
				//客服弹窗
				serviceShow:false,
				noctietext:''
				
			}
		},
		methods: {
			//快递选择参数
			exChoice(val){
				this.express=val[0].label
				this.$set(this.orde,'express_id',val[0].value)
			},
			//规格选择参数
			speciChoice(val){
				if(this.express=='百世快递'){
					if(!val[0].label.includes(this.express)){
						uni.showToast({
						    title: '请选择百世规格',
							image:"../../static/ico/warn2.png",
						    duration: 2000
						});
						return
					}
				}
				this.speci=val[0].label
				this.$set(this.orde,'spec_id',val[0].value)
			},
			//添加留言
			pushMessage(val,index){
				var data=new Set(this.addMessage)
				if(data.has(val)){
					data.delete(val)
					this.addMessage=[...data]
					this.messageList[index].show=false
				}else{
					this.addMessage.push(val)
					this.messageList[index].show=true
				}
			},
			//打开弹窗方法
			openShow(query){
				this[query]=true
			},
			//选择楼层方法
			clickItem(value) {
				this.writeRess.dormitory_id=value[0].value
				this.writeRess.dormitory=value[0].label
			},
			
			//获取快递列表
			getExpressIndex(){
				getExpressList().then(res=>{
					this.expressList=res[1].data.data
				})
			},
			//获取收费规格
			getSpeciIndex(){
				getSpeciList().then(res=>{
					this.speciList=res[1].data.data
				})
			},
			//获取楼栋列表
			getFloorIndex(){
				getFloorList().then(res=>{
					this.floorList=res[1].data.data
				})
			},
			//获取我的地址
			getSite(){
				getSite().then(res=>{
					var length=res[1].data.data.length
					if(length){
						this.address=res[1].data.data[length-1]
						this.$set(this.orde,'address_id',res[1].data.data[length-1].id)
						this.writeRess={...this.address}
					}
				})
			},
			//获取公告信息
			getnoctietext(){
				getnoctie().then(res=>{
					this.noctietext=res[1].data.data.config_value
				})
			},
			//添加收货地址
			addressIndex(){
				address(this.writeRess).then(res=>{
					if(res[1].data.code==200){
						console.log(res)
						uni.showToast({
						    title: '添加成功',
							image:'../../static/ico/correct.png',
						    duration: 1500
						});
						this.siteShow=false
						this.getSite()
					}else{
						uni.showToast({
						    title: '填写正确信息',
							image:'../../static/ico/error.png',
						    duration: 2000
						});
					}
				})
			},
			//将选择的留言和输入框里的留言合一起
			mergeRemark(){
				if(this.remark){
					var remark=this.remark+" | "
				}else{
					var remark=''
				}
				for(var text of this.addMessage){
					remark=remark+text.text+" | "
				}
				this.$set(this.orde,'remark',remark)
			},
			//提交订单
			 submitOrde(){
				 this.mergeRemark()//选择的留言合并
				 payment(this.orde)//支付
			 },
			 //弹出客服
			 service(){
				 this.serviceShow=true
			 },
		},
		
		components:{
			phone
		},
		filters: {
			parNote(val){
				var text=parseMa(val)
				if(text[0]=='未')return text
				return text[0]
			}
		},
		onLoad(){
			/*if(uni.getStorageSync('token')){
				console.log('我有token')
				this.getExpressIndex()
				this.getSpeciIndex()
				this.getFloorIndex()
				this.getSite()
			}else{*/
				Login().then(res=>{
					console.log('我要登陆了')
					this.getExpressIndex()
					this.getSpeciIndex()
					this.getFloorIndex()
					this.getSite()
					this.getnoctietext()
				})
				wx.showShareMenu({
				withShareTicket: true
				})
			//}
		},
		onShareTimeline(){
			return {
			          title: '我的自定义标题',
					   path: '/pages/index/index'
			}
		}
	}
</script>

<style lang="scss">
	.top{
		width: 100vw;
		height: 174rpx;
		background-color: #fed940;
		position: absolute;
		top:0;
		left: 0;
		z-index: -10;
	}
	.note>.ico{
		display: flex;
		border-radius: 30rpx;
		justify-content: center;
		background-color: rgba(255,255,255,0.8);
		align-items:center;
		.imgIco{
			border: 4rpx solid #ffff;
			border-radius: 50%;
			margin: 0 30rpx;
			position:relative;
			top:-60rpx;
		}
	}
	
	.card{
		margin: 0 40rpx;
		border-radius: 30rpx;
	}
	.note{
		margin-top: 110rpx;
		border-radius: 30rpx;
		position: relative;
		.orde{
			margin-top: -40rpx;
			background-color: #ffff;
			border-radius: 30rpx;
		}
	}
	.present,.message{
		margin-top: 40rpx;
		background-color: #ffff;
		.title{
			font-weight: bold;
			font-size: 34rpx;
			margin:0 20rpx;
			padding: 16rpx 0;
			box-sizing:border-box;
			border-bottom: 2rpx solid #e8e8e8;
		}
		.site{
			padding: 30rpx 20rpx;
			letter-spacing: 4rpx;
			display: flex;
			justify-content: space-between;
			text.a{
				color: #999;
				font-size: 30rpx;
			}
		}
	}
	.message{
		.tag{
			display: flex;
			flex-wrap: wrap;
			.pu{
				padding: 10rpx 20rpx;
				background-color: #E4E7ED;
				border-radius: 50rpx;
				margin:10rpx 20rpx;
				color: #999;
			}
		}
	}
	.tijiao{
		margin: 20rpx 0;
		display: flex;
		justify-content: center;
		text{
			background-color: #fed940;
			padding: 14rpx 70rpx;
			border-radius: 50rpx;
			color: #ffff;
			font-size: 34rpx;
		}
		.submitAct{
			background-color: #FFFFFF;
		}
		
	}
	.active{
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		margin:10rpx 20rpx;
		background-color: #fed940;
		color: #FFFFFF;
	}
	.titleSite{
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		padding: 20rpx 0;
	}
	.siteInfo{
		.sub{
			display: flex;
			justify-content: center;
		}
	}
	.service{
		padding: 16rpx 40rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		position:fixed;
		z-index: 99;
		left: 82%;
		top: 93%;
		color: #544e4e;
		font-size: 26rpx;
		background-color:#fed940;
	}
	page{
		background-color: #f8f8f8;
	}
</style>
